<che-toolbar che-title="Create New Team" border-none></che-toolbar>
<che-description>
  Create a team to share workspaces securely with others.
</che-description>
<div class="create-team-progress">
  <md-progress-linear md-mode="indeterminate"
                      ng-show="createTeamController.isLoading"></md-progress-linear>
</div>
<md-content md-scroll-y flex md-theme="default" class="create-team">
  <ng-form name="createTeamForm">
    <!-- Name -->
    <che-label-container che-label-name="Name" che-label-description="Name will be displayed in menus and prefix workspaces.">

      <div layout="column" class="create-team-input">
        <che-input-box che-form="createTeamForm"
                   che-name="name"
                   che-place-holder="Enter team name"
                   aria-label="Name of the team"
                   ng-model="createTeamController.teamName"
                   ng-trim
                   ng-minlength="1"
                   ng-maxlength="20"
                   ng-model-options="{allowInvalid: true, updateOn: 'default blur', debounce: { 'default': 200, 'blur': 0 } }"
                   unique-team-name="createTeamController.teamName"
                   parent-account="createTeamController.accountName"
                   ng-keypress="createTeamForm.$valid && $event.which === 13 && createTeamController.createTeam()"
                   ng-pattern="/^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i"
                   required focusable>
          <div ng-message="pattern">The name can contain alphanumeric characters or single '-' inside.
          </div>
          <div ng-message="minlength">The name has to be more than 1 character long.</div>
          <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
          <div ng-message="uniqueTeamName">This team name is already used.</div>
        </che-input-box>
      </div>
    </che-label-container>

    <che-label-container che-label-name="Owner" che-label-description="Can set permissions and share resources.">

      <div layout="column">
        <che-input-box che-form="createTeamForm"
                   che-name="owner"
                   che-place-holder="Enter team owner"
                   aria-label="Owner of the team"
                   ng-model="createTeamController.owner"
                   ng-trim
                   che-readonly="true">
        </che-input-box>
      </div>
    </che-label-container>
    <che-label-container che-label-name="Members" che-label-description="Invite others to collaborate on the workspace."
      che-alignment="{{createTeamController.members.length > 0 ? 'column' : 'row'}}">
      <list-members members="createTeamController.members" owner="createTeamController.owner" class="create-team-list"></list-members>
    </che-label-container>
  </ng-form>

  <div layout="row" layout-align="center center">
    <che-button-primary id="create-team-button"
                        che-button-title="Create Team"
                        ng-click="createTeamController.createTeam()"
                        ng-disabled="!createTeamForm.$valid || createTeamController.isLoading">
    </che-button-primary>
  </div>

</md-content>
